<template>
    <a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop">
        <i class="">/\</i>
    </a>
</template>

<script>
    export default {
        name: "BackTop",
        data(){
            return {
                backToTop : false,
            }
        },
        methods: {
            scrollToTop(){
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                let browserHeight = window.outerHeight;
                if (scrollTop > browserHeight) {
                    this.backToTop = true
                } else {
                    this.backToTop = false
                }
            },
            backTop() {
                let back = setInterval(() => {
                    if (document.body.scrollTop || document.documentElement.scrollTop) {
                        document.body.scrollTop -= 100;
                        document.documentElement.scrollTop -= 100;
                    } else {
                        clearInterval(back);
                    }
                });
            },
        },
        created: function () {
            let vm = this;
        },
        mounted() {
            window.addEventListener("scroll", this.scrollToTop);
        },
        destroyed() {
            window.removeEventListener("scroll", this.scrollToTop);
        },

    }
</script>

<style>
.toTop {
    position: fixed;
    bottom: 150px;
    right: 30px;
    z-index: 100;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid #999; /*no*/
    text-align: center;
    background-color: #fff;

}
.toTop i {
    color: #999;
    font-size: 58px;
    vertical-align: middle;
    font-weight: 500;
}
</style>
